<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="/mytags" prefix="q"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>君乐宝酸奶管理系统-商品列表</title>
<link rel="stylesheet" href="${ctx}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/css/my.css">
<link href="${ctx}/My97DatePicker/skin/WdatePicker.css" rel="stylesheet">
<script src="${ctx}/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
	<!-- 导航条 -->
	<jsp:include page="/mng/nav.jsp" />
	<!-- /导航条 -->

	<!-- 主容器 -->
	<div class="container" style="margin-top: 76px">
		<div class="row">
			<!-- 功能菜单 -->
			<jsp:include page="/mng/menu.jsp" />
			<!-- /功能菜单 -->

			<!-- 主界面 -->
			<div id="main" class="main col-md-9">
				<!-- 路径导航 -->
				<ol class="breadcrumb" style="border-radius: 0; background: #fff;">
					<li><a href="${ctx}/mng/main.jsp">首页</a></li>
					<li><a href="#">商品管理</a></li>
					<li class="active">商品列表</li>
				</ol>
				<!-- /路径导航 -->

				<!-- 查询表单 -->
				<div class="row">
					<form action="${ctx}/mng/prod/findByName.jhtml" method="post" class="form-horizontal"
						role="form">
						<div class="form-group">
							<label class="col-md-2 control-label">按商品名查询：</label>
							<div class="col-md-3">
								<input type="text" name="condition" class="form-control"
									placeholder="请输入商品名">
							</div>
							<div class="col-md-1">
								<button type="submit" class="btn btn-primary">查询</button>
							</div>
						</div>
					</form>	
					
				</div>
				<!-- /查询表单 -->

				<!-- 数据表格 -->
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>商品编号</th>
							<th>商品名称</th>
							<th>所属分类</th>
							<th>口味</th>
							<th>成本单价</th>
							<th>安全存量</th>
							<th>商品单位</th>
							<th>保质期</th>
							<th>描述</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${page.content}" var="pro">
							<tr>
								<td>${pro.id}</td>
								<td>${pro.name}</td>
								<td>${pro.category.name}</td>
								<td>${pro.model}</td>
								<td>${pro.sale_price}</td>
								<td>${pro.security_num}</td>
								<td>${pro.unit}</td>
								<td>${pro.expireTime}天</td>
								<td>${pro.summary}</td>
								<td><a
									href="${ctx}/mng/prod/detail.jhtml?id=${pro.id}&number=${page.number}"><span
										class="glyphicon glyphicon-edit"></span></a> <a
									href="${ctx}/mng/prod/ajaxdelete.jhtml?id=${pro.id}&number=${page.number}"
									class="del"><span class="glyphicon glyphicon-remove"></span></a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<!-- /数据表格 -->

				<!-- 分页 -->
				<div class="row">
					<div class="col-md-2">
						<a class="btn btn-primary" href="${ctx}/mng/prod/toAdd.jhtml">新增商品</a>
					</div>
					<div class="col-md-10">
						<q:pager totalElements="${page.totalElements}"
							number="${page.number}" size="${page.size}"
							url="${ctx}/mng/prod/list.jhtml" />
					</div>
				</div>
				<!-- /分页 -->

			</div>
			<!-- /主界面 -->
		</div>
	</div>

	<!-- 模态框 -->
	<div class="modal fade" id="yourModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">
						<span class="glyphicon glyphicon-warning-sign"
							style="color: #cc0000;"> 删除确认</span>
					</h4>
				</div>
				<div class="modal-body">
					<h5 id="display">不可恢复删除，您确定吗？</h5>
				</div>
				<div class="modal-footer">
					
					 <a type="submit" id="doDel" class="btn btn-primary"
						href="${ctx}/mng/prod/list.jhtml" data-dismiss="modal">确认删除</a>
				</div>
			</div>
		</div>
	</div>
	<!-- /模态框 -->

	<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
	<script src="${ctx}/bootstrap3/js/bootstrap.min.js"></script>
	<script src="${ctx}/js/my.js"></script>
	<script>
		$(document).ready(function() {
			$(".del").click(function() { //给本页面的所有的“删除”超链接添加“点击事件”处理函数
				var href = $(this).attr("href"); //获取当前点击的超链接的href值
				
				$("#yourModal").modal("show"); //显示模态框
					loadAjaxData(href);
				//当点击“确认删除”按钮时，执行一次性事件处理函数
				$("#doDel").one("click", function() {
				
					var h=$(this).attr("href");
					location.assign(h); //加载指定链接值的目标资源跳转到list页面
				// 刚才没有这句
					//location.assign(href); //加载指定链接值的目标资源
				});

				return false; //阻止元素本身的默认行为
			});
		});
		function loadAjaxData(href){
			var s=href;
			$.post(s,null,function(json){
				$("#display").html(json);
			},"json");
		}
	</script>
</body>
</html>